<template>
	<view class="container">
		<view class="display mainAre">
			<view class="display column oneClassAre" :style="{height:wHeight}">
				<view class="display column oneClassItem" :class="[current==index?'oneClass-check': '']" v-for="(item,index) in oneClassList" :key="index" @click="oneClassClick(index,item)">
					<text>{{item.class_name}}</text>
					<view :class="[current==index?'line': '']"></view>
				</view>
			</view>
			<scroll-view scroll-y="true" enable-back-to-top class="display column twoClassAre">
				<view class="display flow titleAre">
					<view class="line2"></view>
					<text>{{oneClassName}}</text>
					<view class="line2"></view>
				</view>
				<view class="display flow twoClassItemAre">
					<view v-for="(item,index) in twoClassList" :key="index" class="display column twoClassItem" @click="twoClassClick(item)">
						<image :src="item.head_img"></image>
						<text>{{item.class_name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				current: 0,
				oneClassList: [],
				twoClassList: [],
				oneClassName: '',
			}
		},
		onShow() {
			this.getData()
		},
		computed:{
			wHeight(){
				let wHeight = uni.getSystemInfoSync()['windowHeight'];
				return Number(wHeight - 2) + 'px'
			}
		},
		methods: {
			getData(){
				//获取分类
				util.getAjax(this.global.apiUrl + '/get_one_product_class',(res)=>{
					if(res.data.length != 0){
						this.oneClassName = ''
						for(let i in res.data){
							if(this.global.classid){
								console.log(this.global.classid);
								if(res.data[i].id == this.global.classid){
									this.current = i
									this.oneClassName = res.data[i].class_name
									break;
								}
							}
						}
						this.oneClassList = res.data
						if(this.global.classid){
							this.getTwoData(this.global.classid)
						}else{
							if(!this.oneClassName){
								this.oneClassName = res.data[0].class_name
							}
							this.global.classid = res.data[0].id
							this.current = 0
							this.getTwoData(res.data[0].id)
						}
					}
				})
			},
			getTwoData(id){
				util.postAjax(this.global.apiUrl + '/get_two_product_class_yes',(res)=>{
					console.log(res)
					if(res.data.length != 0){
						this.twoClassList = res.data
					}
				},{two_class_id: id})
			},
			oneClassClick(index,list){
				// console.log(index)
				if(this.current == index){
					return
				}else{
					if(this.global.classid){
						this.global.classid = list.id
					}
					this.current = index
					this.oneClassName = list.class_name
					this.getTwoData(list.id)
				}
			},
			twoClassClick(list){
				if(!list.id)return
				uni.navigateTo({
					url: '/subPackages/goods/goodsAre/goodsAre?isAllGoods=' + false + '&list=' + encodeURIComponent(JSON.stringify(list))
				})
			}
		},
		onUnload() {
			this.global.classid = ''
		}
	}
</script>

<style lang="scss">
	@import '@/common/css/categories.scss';
	page{
		@include backG;
	}
	.mainAre{
		@include width;
		@include font;
		.twoClassAre{
			@include width;
			.twoClassItem{
				@include width(33.3%);
				@include margin(25px 0)
				align-items: center;
				box-sizing: border-box;
			}
		}
	}
</style>
